#page-canvas {
    margin: 0 300px 0 0;
    position: relative;
    text-align: center;
    height: 100vh;
    height: 100vh;/*写给不支持calc()的浏览器*/ 
    height:-moz-calc(100vh - (41px + 50px)); 
    height:-webkit-calc(100vh - (41px + 50px)); 
    height: calc(100vh - (41px + 50px));
}
#page-elements .tab-content {
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
}
#content-wrap .elem-wrap {
    position: absolute;
}
/*::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
    border-radius: 2.5px;
}

::-webkit-scrollbar-thumb {
    border-radius: 2.5px;
    background: rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0,0,0,0.4);
}*/
.scrollable-content {width: 100%; height: 100%; text-align: center; float: left;}
#page-canvas .canvas{position:fixed;width:720px;height:410px;left:50%;top:50%;margin:-205px 0 0 -445px;background:#fff;box-shadow:0 0 30px rgba(0,0,0,.15)}
#page-canvas .canvas.recording{}
#page-canvas .canvas .icon-arrow-left{position:absolute;left:-100px;top:170px}
#page-canvas .canvas .icon-arrow-right{position:absolute;right:-100px;top:170px}
#page-canvas .canvas .icon-arrow-left,#page-canvas .canvas .icon-arrow-right{font-size:4em;color:#ccc}
.concontainer {box-shadow: 0 0 30px rgba(0,0,0,.15); position: relative; transition: box-shadow .1s ease-in-out; background: #fff; }
#page-elements {float: right; width: 300px; height: 100%; position: fixed; right: 0; top: 49px; box-sizing: border-box; background: #FFFFFF; /* border-left: 1px solid #bcbcbc; */ box-shadow: 0 0 25px rgba(0, 0, 0, .1); }
.nav.nav-tabs>li>a{position:relative;top:1px;border-radius:0;border:none;border-bottom:2px solid #eee;font-size:1em;padding:15px 25px;font-weight:700}
.nav.nav-tabs>li.active>a,.nav.nav-tabs>li>a:hover{background:0 0}
.nav.nav-tabs>li.active>a,.nav.nav-tabs>li.active>a:hover{color:#039be5;border:none;/*border-bottom:2px solid #03a9f4*/}
.nav.nav-tabs.nav-tabs-justified:after,.nav.nav-tabs.nav-tabs-justified:before{display:none}
.nav.nav-tabs.nav-tabs-justified>li{display:table-cell;vertical-align:top;width:1%;float:none;text-align:center}
.nav.nav-tabs.nav-tabs-justified>li>a{border-right-width:1px;border-left:none}
.nav.nav-tabs.nav-tabs-justified>li:last-child>a{margin-right:0}
.nav.nav-tabs.nav-tabs-justified>li:last-child>a:hover{border-left:none}
.divider {border-bottom: 1px solid #EEE; height: 1px; overflow: hidden; clear: both; margin: 0 5px; }
#page-elements,#page-elements .tab-content{height:100%}
#page-elements .nav.nav-tabs.nav-tabs-justified>li>a{background:#FFFFFF;color:#666666}
#page-elements .nav.nav-tabs.nav-tabs-justified>li.active:after{background:0 0}
#page-elements .nav.nav-tabs.nav-tabs-justified>li{border:none;margin:0}
#page-elements .nav.nav-tabs.nav-tabs-justified > li:hover > a{background:#0090dc;color:#FFFFFF}
#page-elements .nav.nav-tabs.nav-tabs-justified>li.active>a{background:#fff;color:#666}
#page-elements .nav.nav-tabs.nav-tabs-justified>li:last-child{border-right:none}

#page-elements .widget-class{float:right;background:#F4F6F8;width:53px;height:100%;margin-top: 2px;}
#page-elements .widget-class .item{padding:10px;text-align:center}
#page-elements .widget-class .item h5{font-size:.8em}
#page-elements .widget-class .item i{font-size:1.5em;position:relative;top:8px;left:2px}

#page-elements .widget-class .item:hover{background:#E4ECF2;}
#page-elements .widget-class .item.active{background:#fff;}
#page-elements .widget-class .item:hover a{color:#333}
#page-elements .widget-class .item a{color:#000}
#page-elements .widget-class .item.active a{color:#333}
#page-elements .widget-content{height:100%;border-bottom:40px solid transparent;position:relative;margin:0 0px 45px 0px;height: auto; transition-timing-function: cubic-bezier(.1,.57,.1,1); z-index: 1;}
#page-elements .tab-pane{height:100%}
#page-elements .widget-content.image{padding:0;margin:0 -10px}
#page-elements .widget-content.image .item{display:inline-block;width:110px;height:60px;margin:10px;padding:0;}
#page-elements .widget-content.image .item img{width:100%}
#page-elements .widget-content.image .item.add{position:relative;top:2px;line-height:60px;text-align:center;border:1px solid #eee}
#page-elements .widget-content.image .item.add i{position:relative;top:10px;color:#999}
#page-elements .widget-content.image span{display:block;height:100%;width:100%}
#page-elements .widget-content>.item{padding:10px 0;min-height:60px;background:#fff;box-shadow:0 0 5px rgba(0,0,5,.1)}
#page-elements .widget-content>.item {background: none; box-shadow: none; cursor: pointer;    color: #666; position: inherit;/*display: inline-block;*/float: left; width: 50%;}
.elem-snippets .elem-wrap {width: 120px; /*height: auto;*/height: 120px;  -webkit-animation: fade-scale-02 .25s backwards; margin: 0 15px;}
.elem-snippets .elem-wrap .paragraph_btn{width: 100%;text-align: center;}
.def320w {width: 320px; max-width: 100%;border: 1px solid #eee;}
.bluetpl_panel .imgplus {background: #fff; padding: 0px; font-size: 20px; }
.zoomIn {-webkit-animation-name: zoomIn; animation-name: zoomIn; }

#page-canvas .canvas {
    position: relative;
    width: 100%;
    height: auto;;
    margin: 0px 0 0 0px;
    left: 0px;
    top: 0px;
    background: #fff;
    box-shadow: none;
    background: none;
    outline: none;
    display: inline-block;
}
